<!-- 查看公告詳情 -->
<template>
  <el-dialog v-model="dialogVisible" title="查看公告詳情" width="50%" @close="closeDialog">
    <el-form :model="noticeModel" label-width="100px" style="padding-right: 30px">
      <el-form-item label="公告标题：" prop="title">
        <el-input v-model="noticeModel.title" disabled></el-input>
      </el-form-item>
      <el-form-item label="公告状态：" prop="status">
        <el-tag :type="noticeModel.status === 0 ? 'danger' : 'success'" size="small">
          {{ noticeModel.status === 0 ? "未发布" : "已发布" }}
        </el-tag>
      </el-form-item>
      <el-form-item label="发布日期：" prop="date">
        <el-input v-model="noticeModel.date" disabled></el-input>
      </el-form-item>
      <el-form-item label="公告内容：" prop="content">
        <div class="rich-content-display" v-html="noticeModel.content"></div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from "vue";
import { getNotice } from "@/api/platfrom";

const dialogVisible = ref(false);

const noticeModel = reactive({
  title: "",
  content: "",
  status: 0,
  date: "",
});

const open = async (row) => {
  dialogVisible.value = true;
  await getNotice(row.id).then((res) => {
    // console.log(res.data);

    Object.assign(noticeModel, res.data);
  });
};

const closeDialog = () => {
  dialogVisible.value = false;
  Object.assign(noticeModel, {
    title: "",
    content: "",
    status: "",
    date: "",
  });
};
defineExpose({ open, close });
</script>

<style lang="scss" scoped>
.rich-content-display {
  padding: 12px;
  // min-height: 100px;
  // max-height: 300px;
  overflow-y: auto;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fdfdfd;
  line-height: 1.6;
  font-size: 14px;
  color: #606266;
  white-space: normal;
  word-wrap: break-word;
}
</style>
